import React from 'react';

import { Title } from '@/shared/ui';
import { Options } from '@/shared/ui/Options';

import cs from './PremiumBox.module.scss';

type Props = {
  onClick: () => void;
};

export const PremiumBox = ({ onClick }: Props) => (
  <Options amount={3} bg="#F3F3F3" dividerColor="#E9E9E9" padding="medium" withChevrone>
    <div className={cs.text} onClick={onClick}>
      <Title size="xs" tag="span">
        Свой план
      </Title>
      <Title size="xs" tag="p">
        Меняйте размер порции, добавляйте в меню, перемещайте или удаляйте продукты
      </Title>
    </div>
    <div className={cs.text} onClick={onClick}>
      <Title size="xs" tag="span">
        Расширенная статистика
      </Title>
      <Title size="xs" tag="p">
        Контролируйте прогресс ввода продуктов, заполняйте данные роста и веса
      </Title>
    </div>
    <div className={cs.text} onClick={onClick}>
      <Title size="xs" tag="span">
        Расширенная статистика
      </Title>
      <Title size="xs" tag="p">
        Контролируйте прогресс ввода продуктов, заполняйте данные роста и веса
      </Title>
    </div>
  </Options>
);
